<template>
    <view>
        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>
        <view class="appli-top"></view>
        <view class="apply-title-line">基本信息</view>
        <view class="apply-item">
            <view class="apply-title">门店名称</view>
            <view class="info-item">
                <input placeholder="填写名称请与门店牌匾名称一致" maxlength="50" placeholder-class="placeholder-input" @input="inputName" :value="name" />
            </view>
        </view>
        <view class="apply-title-line1"></view>
        <view class="apply-item">
            <view class="apply-title">门脸照</view>
            <view class="info-item info-item-img">
                <view class="item-img" v-for="(item, index) in photo_arr" :key="index">
                    <image :src="item"></image>
                    <view class="item-del" @tap="delImg($event, { index })" :data-index="index" v-if="check_status != 1">
                        <image :src="imgUrl + '/imgs/user/user_member_close.png'"></image>
                    </view>
                </view>
                <view class="item-img" @tap="onChooseImage" v-if="photo_arr.length < 1">
                    <image :src="imgUrl + '/imgs/user/user_member_add.png'"></image>
                </view>
            </view>
        </view>
        <view class="appli-top"></view>
        <view class="apply-title-line">经营信息</view>
        <view class="apply-item">
            <view class="apply-title">门店地址</view>
            <view class="info-item" @tap="inputAddress">
                <view class="info-text">{{ address }}</view>
                <view class="info-right">
                    <image :src="imgUrl + '/imgs/select-right.png'"></image>
                </view>
            </view>
        </view>
        <view class="apply-title-line1"></view>
        <view class="apply-item">
            <view class="apply-title">联系人</view>
            <view class="info-item">
                <input placeholder="请输入真实姓名" maxlength="50" placeholder-class="placeholder-input" @input="inputContact" :value="contact_name" />
            </view>
        </view>
        <view class="but-submit">
            <view :class="'add ' + (name && storefront && address && check_status == 4 ? 'add-end' : '') + ' add' + check_status" @tap="submitApply">
                <span class="add-text" v-if="check_status == 0">审核中不可重复申请</span>
                <span class="add-text" v-if="check_status == 1">审核已通过</span>
                <span class="add-text" v-if="check_status == 2">审核失败</span>
                <span class="add-text" v-if="check_status == 4">提交</span>
            </view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';

const Config = require('../../../config/index.js');

const Api = require('../../../api/index.js');

export default {
    components: {
        navber,
  
    },
    data() {
        return {
            navbarData: {
                title: '门店信息' //顶部标题
            },

            //导航栏
            imgUrl: Config.imgUrl,

            //图片url
            name: '',

            //店铺名称,
            contact_name: '',

            //联系人
            photo_arr: [],

            storefront: '',
            address: '',

            //状态 1审核中 2审核失败 3审核通过 4待提交
            check_status: 4,

            photo: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // console.log(options);
        this.detail();
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.detail();
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        submitApply(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            if (!(this.name && this.contact_name && this.storefront && this.address && (this.check_status == 2 || this.check_status == 4))) {
                return;
            }

            var json = {
                name: this.name,
                contact_name: this.contact_name,
                storefront: this.storefront,
                address: this.address
            };
            Api.userAddBusiness(json).then((res) => {
                if (res.code == 1) {
                    uni.showToast({
                        title: '提交完成,等待审核',
                        duration: 2000
                    });
                    uni.switchTab({
                        url: '/pages/user/index'
                    }); // wx.navigateBack({
                    //   data: 1
                    // });
                }
            });
        },

        inputAddress(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            let that = this;
            uni.chooseLocation({
                success: (result) => {
                    that.setData({
                        address: result.address
                    });
                }
            });
        },

        inputContact(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                contact_name: e.detail.value
            });
        },

        inputName(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                name: e.detail.value
            });
        },

        detail() {
            let that = this;
            Api.userGetBusiness({}).then((res) => {
                if (res.code == 1 && res.data) {
                    that.setData({
                        name: res.data.name,
                        contact_name: res.data.contact_name,
                        address: res.data.address,
                        photo_arr: [res.data.storefront],
                        storefront: res.data.storefront,
                        check_status: res.data.check_status
                    });
                } else if (res.code == 2) {
                    that.setData({
                        check_status: 4
                    });
                }
            });
        },

        onChooseImage(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            let that = this;
            let len = 1 - that.photo_arr.length; //上传图片

            uni.chooseImage({
                count: len,

                success(res) {
                    const tempFilePaths = res.tempFilePaths;

                    for (let i = 0; i < tempFilePaths.length; i++) {
                        Api.uploadFile(tempFilePaths[i], 'usermember').then((url) => {
                            let url_arr = that.photo_arr;
                            url_arr.push(url);
                            let card_photo = url_arr.join(',');
                            that.setData({
                                photo_arr: url_arr,
                                storefront: card_photo
                            }); // console.log(that.data.storefront)
                        });
                    }
                }
            });
        },

        delImg(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            let index = e.currentTarget.dataset.index;
            let photo_arr = this.photo_arr;
            photo_arr.splice(index, 1);
            let card_photo = photo_arr.join(',');
            this.setData({
                photo_arr: photo_arr,
                photo: card_photo
            });
            console.log(photo_arr);
        }
    }
};
</script>
<style>
@import './index.css';
</style>
